<template>


	<view class="head">
		<view class="brand">
			STORY LINE
			<span>v {{version}}</span>
			<span class="property-info" v-if="kitVersion">kit={{kitVersion}}</span>
		</view>

		<view style="flex: 1;"></view>

		<view style="display: flex;flex-direction: row;">
			<view>
				<uni-icons type="search" style="color: white;size: 12px;margin: 4px;"></uni-icons>
			</view>
			<input class="search-box" v-model="keywords" type="search" @click="clearSearchBox" />
			<button class="btn-search" @click="search">
				<span v-if="keywords">搜索</span>
				<span v-else>刷新</span>
			</button>
			<button class="btn-search" @click="reset">重置</button>
		</view>

		<view style="flex: 1;"></view>
		<view style="display: flex;flex-direction: row;" v-if="appStore">
			<!-- 快速跳转：
			<input type="number" class="search-box" style="width: 40px;margin-right: 10px;" 
				v-model="userWillGo" @confirm="goto" placeholder="请输入要跳转的页码" @focus="clearMe"/>
			 -->
			<uni-pagination  :page-size="appStore.state.pageSize" :pager-count="appStore.state.pageCount"
				:total="appStore.state.eventsCount" :current="appStore.state.pageIndex"
				@change="changePage"></uni-pagination>
			<button style="margin-left: 5px;" class="btn-search" @click="goto">快速跳转</button>
			<uni-icons type="help"  @click="toHelp" color="white"></uni-icons>
		</view>
	</view>


</template>

<script setup>
	import {
		useAppStore
	} from '@/store/appStore';
	import {
		ref
	} from 'vue';
	
	import * as Dao from '@/common/dao';

	const appStore = useAppStore();

	const keywords = ref('')
	
	// const userWillGo = ref(1)
	
	const info = uni.getSystemInfoSync()
	const version = ref(info.appVersion)
	const kitVersion = ref('')
	
	console.log('框架版本：', _extensionVersion)
	console.log('UI版本：', info.appVersion)
	if (_extensionVersion != info.appVersion) {
		console.log('框架版本与UI版本不一致')
		kitVersion.value = _extensionVersion;
	}else{
		console.log('框架版本与UI版本一致')
	}

	function search() {
		appStore.loadEvents(1, 500, keywords.value);
	}

	function reset() {
		keywords.value = '';
		search();
	}

	function changePage(evt) {
		const {
			type,
			current
		} = evt;
		
		if (type == 'prev') {
			if (current > 0) {
				appStore.loadEvents(current, 500, keywords.value);
			}
		} else if (type == 'next') {
			if (current <= appStore.state.pageCount) {
				appStore.loadEvents(current, 500, keywords.value);
			}
		}
	}
	
	function goto() {
		Dao.goTo(keywords.value);
	}
	
	function toHelp() {
		Dao.showHelp();
	}
	
	function clearSearchBox() {
		keywords.value = ''
	}
</script>

<style lang="scss">
	.head {
		display: flex;
		flex-direction: row;
		background-image: linear-gradient(var(--background-color2), var(--background-color3));
		height: 20px;
		line-height: 20px;
		font-size: 10px;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
	}

	.property-info {
		background-color: var(--background-color);
		padding: 2px 5px;
		border-radius: 3px;
		font-weight: 700;
	}

	.property-item {
		flex: 1;
	}

	.brand {
		width: 200px;
		white-space: nowrap;
		font-weight: 700;
		margin-left: 10px;
	}


	.search-box {
		font-size: 10px;
		line-height: 20px;
		height: 16px;
		margin-top: 2px;
		border-radius: 3px;
		background-color: var(--background-color);
		text-align: center;
		border: 1px solid var(--background-color4);
	}

	.btn-search {
		height: 16px;
		font-size: 10px;
		line-height: 16px;
		margin: 2px;
		background-color: var(--background-color);
		color: white;
	}
</style>